{% extends "base.html" %}

{% block title %}
<title>我爱诗词 熟读唐诗三百首不会赋诗也会吟</title>
{% endblock %}

{% block css %}
<link rel="stylesheet" href="../static/css/shici.css">
<link rel="stylesheet" href="../static/css/flex.css">
{% endblock %}

{% block javascript %}
<script src="../static/js/jquery-3.1.1.min.js"> </script>
{# <script src="../static/js/bootstrap-3.3.7.min.js"> </script> #}
{% endblock %}

{% block content %}
<!-- Poems start -->
<div class="row">
  {% if work_list|length == 0 %}
    <p> <h2>没有找到满足条件的诗词和文章！</h2></p>
    <p> <h2>请重新选择搜索关键字</h2></p>
  {% else %}
    {% for work in work_list %}
    <div class="col-md-4">
        <div class="work_tile" >
          <div class="mask" data-toggle="modal" data-target="#workDetail" href="get?id={{ work['id'] }}" id="{{ work['id'] }}">
            <p><header> {{ work['name'] }} <span class="author">{{ work['author'] }}</span> </header></p>
            {% if work['preface']|length %}
                 <p class="preface" {% if work['preface']|length > 15 %} style="text-indent: 2em;" {% else %} style="text-align: center;" {% endif %} > {{ work['preface'] }} </p>
            {% endif %}
            {% if work['type'] == '诗' %}
              {% for num in range(0, work['lines']|length, 2) %}
                <p class="shi_style">
                <span> {{ work['lines'][num] }} </span>
                {% if num+1 < work['lines']|length %}
                <span> {{ work['lines'][num+1] }} </span>
                {% endif %}
                </p>
              {% endfor %} 
            {% else %}
              {% for num in range(0, work['lines']|length) %}
                 <p class="ci_style"> {{ work['lines'][num] }} </p>
              {% endfor %}

            {% endif %}
          </div>
        </div>
    </div>
    {% endfor %}
  {% endif %}
</div>
<!-- Poem end -->

{% endblock %}
<!-- block content end -->

